<template>
    <div>
        <!-- 歌单头部模块 -->
        <SongHead :songHeadData="songHeadData">
        
        </SongHead>
        <!-- 歌曲列表 -->
        <MusicList :musicList="musicList">

        </MusicList>
    </div>
</template>

<script>

import SongHead from '../songcomponent/songhead.vue'
import MusicList from '../songcomponent/musiclist.vue'

import { getPayDetail } from 'api/tabbar/index'
import { numberFormat } from 'utils/numformat.js'

import { mapState } from 'vuex'
export default {
    name:'songdetail',
    components: {
        SongHead,
        MusicList
    },
    data() {
        return {
            songHeadData:{},
            musicList: [] //歌单列表
        };
    },
    created(){
      this.getPayDetails(this.$route.params.songId)
    },
    computed:{
      ...mapState('playcontroller',['isplay'])
    },
    methods:{
      // 获取歌单详情
      getPayDetails(songId){
        getPayDetail({id:songId}).then(res => {
          console.log(res)
          // 总数
          res.playlist.playCount = numberFormat(res.playlist.playCount)
          // 评论
          res.playlist.commentCount = numberFormat(res.playlist.commentCount)
          // 收藏
          res.playlist.trackCount = numberFormat(res.playlist.trackCount)
          // 分享
          res.playlist.shareCount = numberFormat(res.playlist.shareCount)

          this.songHeadData = res.playlist
          this.musicList = res.playlist.tracks
          
          // 如果是播放状态 就不传列表 
          if( true ){
              // 将歌单列表存在vuex中
              this.$store.commit('playcontroller/setControlList',this.musicList)
          }
        
        })
      }
    }
};
</script>

<style scoped lang="scss">

</style>
